import React, {
  Component,
} from "react";
import {
  View,
  Image,
} from 'react-native';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createMaterialTopTabNavigator,
} from 'react-navigation';

import Login from "./pages/login/login";
import Order from "./pages/order/order";
import Task from "./pages/task/task";
import User from "./pages/user/user";
import Detail from "./pages/detail/detail";
import AchieveTask from "./pages/achieve-task/achieve-task";
import CheckDetails from "./pages/check-details/check-details";
import ViewMoney from "./pages/view-money/view-money";
import ModifyPassword from "./pages/modify-password/modify-password";
import Account from "./pages/account/account";
import LastRank from "./pages/last-rank/last-rank";
import TaskAccount from "./pages/task-account/task-account";
import AccountList from "./pages/account-list/account-list";
import AddAccount from "./pages/add-account/add-account";
import KeFu from "./pages/kefu/kefu";
import BonusRule from "./pages/bonus-rule/bonus-rule";

import orderIcon from "./asset/images/tab/list.png";
import taskIcon from "./asset/images/tab/task.png";
import rankIcon from "./asset/images/tab/rank.png";
import userIcon from "./asset/images/tab/user.png";

const common = (title) => {
  return {
    title,
    headerStyle: {
      backgroundColor: '#f6db7b',

    },
    headerTintColor: "#fff",
  };
}

const commonTab = (title, icon) => {
  return {
    tabBarLabel: title,
    tabBarIcon: ({
      focused,
      horizontal,
      tintColor
    }) => {
      return (<Image source={icon} style={{width: 22, height: 22, tintColor: tintColor}} />)
    },
  }
}

const tabStack = createBottomTabNavigator({
  Order: {
    screen: Order,
    navigationOptions: () => (commonTab('可接单', orderIcon)),
  },
  Task: {
    screen: Task,
    navigationOptions: () => (commonTab('任务', taskIcon)),
  },
  Rank: {
    screen: LastRank,
    navigationOptions: () => (commonTab('排行榜', rankIcon)),
  },
  User: {
    screen: User,
    navigationOptions: () => (commonTab('个人信息', userIcon)),
  },
}, {
  initialRouteName: 'Order',
  tabBarOptions: {
    showIcon: true,
    activeTintColor: "#f6db7b",
    inactiveTintColor: "#cdcdcd"
  }
})

const main = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: () => (common('登陆')),
  },
  Tab: {
    screen: tabStack,
    navigationOptions: () => ({
      header: null,
    }),
  },
  Detail: {
    screen: Detail,
    navigationOptions: () => (common('接单')),
  },
  AchieveTask: {
    screen: AchieveTask,
    navigationOptions: () => (common('提交')),
  },
  CheckDetails: {
    screen: CheckDetails,
    navigationOptions: () => (common('审核中任务')),
  },
  ViewMoney: {
    screen: ViewMoney,
    navigationOptions: () => (common('我的豆子')),
  },
  ModifyPassword: {
    screen: ModifyPassword,
    navigationOptions: () => (common('修改密码')),
  },
  Account: {
    screen: Account,
    navigationOptions: () => (common('绑定支付宝')),
  },
  TaskAccount: {
    screen: TaskAccount,
    navigationOptions: () => (common('任务账号')),
  },
  AccountList: {
    screen: AccountList,
    navigationOptions: () => (common('账号列表')),
  },
  AddAccount: {
    screen: AddAccount,
    navigationOptions: () => (common('添加账号')),
  },
  KeFu: {
    screen: KeFu,
    navigationOptions: () => (common('客服')),
  },
  BonusRule: {
    screen: BonusRule,
    navigationOptions: () => (common('奖励机制')),
  }
}, {
  initialRouteName: 'Login',
});

export default main;